<template>
	<view >
		<view class="swiper-box">
			<swiper circular="true" autoplay="true" @change="swiperChange">
				<swiper-item v-for="(swiper, i) in detailData.big_pics" :key="i"><image :src="swiper" @click="proviewimg(swiper)"></image></swiper-item>
			</swiper>
		</view>
		<!-- 标题 价格 -->
		<view class="info-box">
			<view class="info-title">{{detailData.title}}</view>
		</view>
		
		<!-- 详情 -->
		<view class="description">
			<view class="title">
				<!-- <text>商品详情2</text> -->
			</view>
			<u-parse :html="detailData.detail" style="font-size:0"></u-parse>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			popupShow: false,
			//轮播图下标
			currentSwiper: 0,
			// 商品信息
			detailList: {
				big_pics: [
				],
				goods_id: 1,
				goods_num: 1,
				name: '',
				detail:''
			},
			themeColor: '#F34A4A',
			goods_id: '',
			urls: '',
			Uparse:'',
			statusmall: 0, //0是购买 1 是加入购物车
			selectedIndex: 0,
			combinationsProps: {
				id: 'skuId',
				value: 'skuValue',
				image: 'skuImage',
				price: 'skuPrice',
				stock: 'skuStock',
				integral:"skuIntegral",
				combination:"combination"
			},
			specificationsProps: {
				id: 'id',
				list: 'attr_list',
				name: 'attr_group_name'
			},
			combinations: [
				{
					skuValue: '',
					skuImage: '',
					skuPrice: 0,
					skuStock: 0
				}
			],
			detailData:{}
		};
	},
	onLoad(option) {
		this.goods_id = option.goods_id;
	},
	onReady() {},
	//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
	onReachBottom() {},
	onShow() {
		this.getlist();
	},
	mounted() {},
	methods: {
		getlist(){
			
			let data = {
				goods_id:this.goods_id
			}
			this.$Request.get(this.$api.mhapi.goodsDetail,data).then(res => {
				this.detailData = res.data.goods
			
			});
		},
		proviewimg(img){
			let arr = []
			arr.push(img)
			uni.previewImage({
				urls: arr,
				current :1,
				longPressActions: {
					itemList: [ '保存图片'],
					success: function(data) {
						uni.saveImageToPhotosAlbum({
							filePath: arr,
							success: function () {
								uni.showToast({
									title:"保存成功",
									duration:1500
								})
							}
						});
					}
				}
			});
		},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		goshoucang(){
			let data = {
				goods_id:this.goods_id
			}
			this.$Request.post(this.$api.mall.addcollection,data).then(res => {
				uni.showToast({
					title:res.msg,
					icon:"none"
				})
				if(this.detailData.is_collection==0){
					this.detailData.is_collection = 1
				}else{
					this.detailData.is_collection = 0
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
	
	.share-content {
		background: #FFFFFF;
		padding-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	
		view {
			width: 292rpx;
			border: 1rpx solid #CCCCCC;
			font-size: 26rpx;
		}
	}
	
	.share-wrap {
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	
		>view {
			margin: 20rpx;
			width: 200rpx;
	
			image {
				display: block;
				width: 100rpx;
				margin: 0 auto;
				height: 100rpx;
			}
	
			view {
				display: block;
				text-align: center;
				font-size: 26rpx;
				margin-top: 10rpx;
			}
		}
	}
	.info-miaoshu{
		font-size: 26upx;
		color: #666666;
		font-weight: 400;
		padding-top: 10rpx;
	}
	.info-stock{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 20rpx;
		.price{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			text-decoration:line-through;
			margin-left: 10rpx;
		}
		.stock{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.info-price{
		padding-top: 10rpx;
		text:nth-child(1){
			font-size: 36upx;
			color: #FF0000;
			font-weight: 400;
		}
		text:nth-child(2){
			font-size: 26upx;
			color: #999;
			font-weight: 400;
			text-decoration:line-through;
			margin-left: 10rpx;
		}
	}
	.info-title{
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
	.info-box {
		width: 750rpx;
		background-color: #fff;
		view{
			margin: 0 auto;
			max-width: 600rpx;
			padding: 20rpx 0 20rpx 20rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #333333;
		}
	}
.footer {
	width: 100%;
	position: fixed;
	bottom: 0upx;
	height: 100rpx;
	border-top: solid 1upx #eee;
	background-color: #fff;
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.shoucang{
		width:280rpx;
		height: 100rpx;
		font-size: 18rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		flex-direction: column;
		image{
			width: 34rpx;
			height: 32rpx;
		}
	}
	.joinCart {
		color: #fff;
		font-size: 28upx;
		view{
			width:470rpx;
			height: 100rpx;
			background: linear-gradient(180deg, #FCC485 0%, #FF760D 100%);
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
}

page {
	background-color: #f8f8f8;
}


.icon {
	font-size: 26upx;
}

.status {
	width: 100%;
	height: 0;
	position: fixed;
	z-index: 10;
	top: 0;
	/*  #ifdef  APP-PLUS  */
	height: var(--status-bar-height); //覆盖样式
	/*  #endif  */
	background-color: #f1f1f1;
	transition: opacity 0.05s linear;
}

.swiper-box {
	position: relative;
	// width: 750rpx;
	// height: 362rpx;
	width: 100%;
	height: 100vw;
	swiper {
		width: 100%;
		height: 100vw;

		swiper-item {
			image {
				width: 100%;
				height: 100vw;
			}
		}
	}

	.indicator {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 25upx;
		height: 40upx;
		border-radius: 40upx;
		font-size: 22upx;
		position: absolute;
		bottom: 20upx;
		right: 20upx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.2);
	}
}


.description {
	background: #FFFFFF;

	.title {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		text{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 0px;
			color: #333333;
			margin: 0 15rpx;
		}
		image{
			width: 34rpx;
			height: 32rpx;
		}
	}
}

</style>
